<template>
  <div id="map2" ref="map2">
    <sm-web-map :server-url='Url' :map-id="mapid" >
        <!-- 缩放 -->
        <sm-zoom position="top-right" :show-zoom-slider="true"></sm-zoom>
        <!-- 比例尺 -->
        <sm-scale position="bottom-left"></sm-scale>
        <!-- 图层 -->
        <sm-layer-list position="top-left" v-if="isShow==='1'"></sm-layer-list>
        <!-- 量算 -->
        <sm-measure position="top-left" v-else-if="isShow==='2'"></sm-measure>
        <!-- 路线规划  :data="{tk:tk}" -->
        <!-- <sm-tdt-route position="top-left" :collapsed="false"></sm-tdt-route> -->
        
    </sm-web-map>
    
  </div>
</template>
<script>
import Axios from 'axios'
import screenfull from "screenfull";

 let mapid =''
export default {
    name:'show2D',
    data(){
        return{
            mapid,
            isShow:'',
            Url:this.GLOBAL.Url2D,
        }
    },
    methods:{
        screen(){
            screenfull.toggle();
        }
    },
    created(){
        this.mapid = this.$route.query.id
        this.$root.$on('click',(val)=>{
            this.isShow = val;
        })
    },
    mounted(){
        // mapboxgl.accessToken ='pk.eyJ1Ijoic3g4NTQ5NjUxODUiLCJhIjoiY2toYnBjNG5hMGNoMzJ1bGZleTJmbXRmNyJ9.-QuDlX4hxOGVKX-xE37MDg'
        // var map = new mapboxgl.Map({
        //     container: 'map2',
        //     style: 'mapbox://styles/mapbox/dark',
        //     zoom: 13,
        //     center: [4.899, 52.372]
        // });
    },

    watch:{
        $route(to,from){
            if(to.query.id !=this.mapid){
                this.mapid = to.query.id
            }
        },
    }
}
</script>

<style scoped>
#map2{
        margin-left: 75px;
        position: fixed;
        width: 96%;
        height: 100%;
    }

</style>